<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-class="fixed ? 'dialog-fiexd-full' : ''"
    :with-header="header"
    append-to-body
    :title="title"
    direction="rtl"
    :size="width"
    @closed="closed"
  >
    <div v-if="isLoading">加载中..</div>
    <slot v-else />
    <template #footer v-if="footer">
      <slot v-if="$slots.footer" name="footer" />
      <template v-else>
        <div class="dialog-footer">
          <Button v-if="isShowCancal">{{ cancalText }}</Button>
          <Button type="primary" :before-change="useBeforeChange">{{ okText }}</Button>
        </div>
      </template>
    </template>
  </el-dialog>
</template>

<script lang="ts">
  export default { name: 'DarwerComponent' }
</script>
<script setup lang="ts">
  import { type PropsInterface } from './types/props'
  import { useDarwer } from './hook'
  const props = withDefaults(defineProps<PropsInterface>(), {
    width: () => '90%',
    okText: () => '确定',
    cancalText: () => '取消',
    footer: () => true,
  })
  const emit = defineEmits(['update:open', 'ok'])
  const visible = ref(false)
  // hook
  const { isLoading, useInnerLoading, useBeforeChange } = useDarwer(props)
  /**
   * 关闭
   */
  const closed = () => {
    emit('update:open', false)
  }

  onMounted(() => {
    visible.value = props.open
    useInnerLoading()
  })

  //   watch(
  //     () => props.open,
  //     (status) => {
  //       console.log(2222)
  //     }
  //   )
</script>
<style lang="scss">
  .dialog-fiexd-full {
    overflow: initial;
    .el-overlay-dialog {
      overflow: initial;
    }
    .el-dialog {
      display: flex;
      flex-direction: column;
      margin: 10vh auto 0;
      height: 80vh; // viewHeight
    }
    .el-dialog__body {
      flex: 1;
      height: 0;
      overflow-y: auto;
    }
  }
</style>
